<template>
    <el-form :model="form" :inline="true">
        <el-form-item label="采购编号">
            <el-input v-model="form.pcNumber" style="width: 300px;" />
        </el-form-item>
        <el-form-item label="采购时间" required>
            <el-col :span="11">
                <el-form-item>
                    <el-date-picker v-model="form.pcPreparationDate1" type="date" aria-label="Pick a date"
                        placeholder="Pick a date" style="width: 280px" />
                </el-form-item>
            </el-col>
            -
            <el-col :span="11">
                <el-form-item>
                    <el-date-picker v-model="form.pcPreparationDate2" type="date" aria-label="Pick a date"
                        placeholder="Pick a date" style="width: 280px" />
                </el-form-item>
            </el-col>
        </el-form-item>
        <el-form-item label="采购人员">
            <el-input v-model="form.pcOurRepresentativesName" @dblclick="dialogVisible2 = true; GetSectorList()" />
        </el-form-item>
        <el-form-item label="供应商">
            <el-input v-model="form.vName" style="width: 300px;" @dblclick="dialogVisible = true" />
        </el-form-item>
        <el-button type="primary" @click="GetShowTime()">查询</el-button>
        <el-button type="danger" @click="DelAll">删除</el-button>
    </el-form>
    <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="pcNumber" label="采购合同编号" />
        <el-table-column prop="pcName" label="采购合同名称">
            <!-- <template v-slot="scope">
                <a @click="pcNames(scope.row.purchaseContractsIds)">{{ scope.row.pcName }}</a>
            </template> -->
        </el-table-column>
        <el-table-column prop="vName" label="供应商名称">
            <template v-slot="scope">
                <a @click="vender(scope.row.vendorId)">{{ scope.row.vName }}</a>
            </template>
        </el-table-column>
        <el-table-column prop="sppName" label="产品名称" />
        <el-table-column prop="spcAfterTotalPrice" label="采购金额">
            <template #default="scope">
                <span style="color: red;">{{ scope.row.spcAfterTotalPrice.toFixed(2) }}</span>￥
            </template>
        </el-table-column>
        <el-table-column prop="pContractsDate" label="合同日期">
            <template #default="scope">
                <span>{{ scope.row.pContractsDate.substring(0, 10) }} {{ scope.row.pContractsDate.substring(11,
                    19) }}</span>
            </template>
        </el-table-column>
        <el-table-column prop="manpowerId" label="采购人员">
            <template #default="scope">
                <span v-if="scope.row.manpowerId == 1">张吉惟6</span>
                <span v-if="scope.row.manpowerId == 2">林国瑞66</span>
                <span v-if="scope.row.manpowerId == 4">张萌</span>
                <span v-if="scope.row.manpowerId == 5">刘柏宏</span>
                <span v-if="scope.row.manpowerId == 6">王美</span>
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template #default="scope">
                <!-- <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
                    修改
                </el-button> -->
                <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">
                    删除
                </el-button>
            </template>
        </el-table-column>
    </el-table>
    <table>
        <tr>
            <td>
                <el-pagination v-model:current-page="Page.PageIndex" v-model:page-size="Page.PageSize"
                    :page-sizes="[5, 10, 15, 20]" :background="true" layout="slot, sizes" prev-text="上一页"
                    next-text="下一页" :total="Page.listcount" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange">
                    共{{ Page.listcount }}条数据，每页{{ Page.PageSize }}条，共{{ Page.PageIndex }}/{{ Page.pagecount }}页
                </el-pagination>
            </td>
            <td>
                <el-pagination v-model:current-page="Page.PageIndex" v-model:page-size="Page.PageSize"
                    :page-sizes="[5, 10, 15, 20]" :background="true" layout="slot, prev, pager, next" prev-text="上一页"
                    next-text="下一页" :total="Page.listcount" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange">
                    <el-button :disabled="Page.PageIndex == 1" @click="handleCurrentChange(1)">首页</el-button>
                </el-pagination>
            </td>
            <td>
                <el-pagination v-model:current-page="Page.PageIndex" v-model:page-size="Page.PageSize"
                    :page-sizes="[5, 10, 15, 20]" :background="true" layout="slot, jumper" prev-text="上一页"
                    next-text="下一页" :total="Page.listcount" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange">
                    <el-button :disabled="Page.PageIndex == Page.pagecount"
                        @click="handleCurrentChange(Page.pagecount)">尾页</el-button>
                </el-pagination>
            </td>
        </tr>
    </table>
    <!-- 我方代表弹框 -->
    <el-dialog v-model="dialogVisible2" title="我方代表" width="1000" style="height: 700px;" :before-close="handleClose">
        <span></span>
        <template #footer>
            <el-row>
                <el-col :span="4">
                    <el-tree style="max-width: 600px" :data="sectorlist" :props="defaultProps" default-expand-all="true"
                        @node-click="handleNodeClick2" />
                </el-col>
                <el-col :span="20">
                    <el-table :data="manpowerList" style="width: 100%" @selection-change="handleSelectionChange2">
                        <el-table-column type="selection" width="55" />
                        <el-table-column type="index" label="序号" align="center" />
                        <el-table-column prop="mName" label="姓名" align="center" />
                        <el-table-column prop="sectorName" label="部门" align="center" />
                        <el-table-column prop="postName" label="岗位" align="center" />
                    </el-table>
                </el-col>
            </el-row>
            <el-button type="primary" @click="dialogVisible2 = false">
                保存
            </el-button>
        </template>
    </el-dialog>
    <!-- 供应商名称弹框 -->
    <el-dialog v-model="dialogVisible" title="供应商名称" width="1000" style="height: 600px;" :before-close="handleClose">
        <span></span>
        <template #footer>
            <el-row>
                <el-col :span="4">
                    <el-tree style="max-width: 600px" :data="VendorType" :props="defaultProps" default-expand-all="true"
                        @node-click="handleNodeClick" />
                </el-col>
                <el-col :span="20">
                    <el-table :data="tableDatas" style="width: 100%" @selection-change="handleSelectionChanges">
                        <el-table-column type="selection" width="55" />
                        <el-table-column type="index" label="序号" align="center" />
                        <el-table-column prop="vNumber" label="供应商编号" align="center" />
                        <el-table-column prop="vName" label="供应商名称" align="center" />
                        <el-table-column prop="vendorTypeName" label="供应商分类" align="center" />
                        <el-table-column prop="sName" label="供应商省" align="center" />
                        <el-table-column prop="cName" label="供应商市" align="center" />
                        <el-table-column prop="vContact" label="联系人" align="center" />
                    </el-table>
                </el-col>
            </el-row>
            <el-button type="primary" @click="dialogVisible = false">
                保存
            </el-button>
        </template>
    </el-dialog>
</template>
<script setup lang="ts">
const dialogVisible = ref(false)    //供应商名称弹框
import { onMounted, ref, reactive } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import axios from "axios";
import http from '../../../http.js'
const route = useRoute();
const router = useRouter();
const form = reactive({
    pcNumber: '',
    pcPreparationDate1: '',
    pcPreparationDate2: '',
    pcOurRepresentatives: '',
    spcAfterPrice1: '',
    spcAfterPrice2: '',
    vendorId: '',
    vName: '',
    pcOurRepresentativesName: ''
})
const tableData = ref([])
onMounted(() => {
    GetShowTime();
    getVendorType();
    table();
    GetSectorList();
    GetManpowerList();
})
//分页
const Page = ref({
    PageIndex: 1,
    PageSize: 10,
    listcount: 0,
    pagecount: 0
})
const handleSizeChange = (val: number) => {
    Page.value.PageSize = val;
    GetShowTime()
}
const handleCurrentChange = (val: number) => {
    Page.value.PageIndex = val;
    GetShowTime()
}
const GetShowTime = () => {
    debugger
    axios.get(http.zblnb + "/cg/api/PurchaseContracts/ProductTypeSelectShow", {
        params: {
            PCNumber: form.pcNumber,
            PContractsDate1: form.pcPreparationDate1,
            PContractsDate2: form.pcPreparationDate2,
            PCOurRepresentatives: form.pcOurRepresentatives,
            VendorId: form.vendorId,
            PageIndex: Page.value.PageIndex,
            PageSize: Page.value.PageSize
        }
    }).then((res) => {
        tableData.value = res.data.data.list;
        Page.value.listcount = res.data.data.totalcount;
        Page.value.pagecount = res.data.data.pagecount;
        console.log(tableData.value)
    })
}
const handleEdit = (index: number, row: any) => {
    console.log(index, row)
    router.push({
        path: '/UpdPurhaseContracts',
        query: {
            Ids: row.purchaseContractsIds,
            sid: row.sourcProductContractId
        }
    })
}
const handleDelete = (index: number, row: any) => {
    console.log(row)
    ElMessageBox.confirm(
        '确定删除吗?',
        'Warning',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            axios.post(http.zblnb + '/cg/api/PurchaseContracts/DelPurchaseContract', {
                "purchaseContractsIds": [
                    row.purchaseContractsIds
                ],
                "delName": "王思雨"
            }).then((res) => {
                if (res.data.data > 0) {
                    ElMessage.success('删除成功')
                    GetShowTime()
                }
                else {
                    ElMessage.error('删除失败')
                }
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '已取消',
            })
        })
}

const Del = reactive({
    allocateId: [],
    delName: ''
})
interface PurchaseContracts {
    purchaseContractsId: number; // 或者 string  
}
const handleSelectionChange = (val: PurchaseContracts[]) => {
    Del.allocateId = []; // 如果希望每次重置数组，请取消注释  
    val.forEach((item) => {
        if (!Del.allocateId.includes(item.purchaseContractsIds)) {
            Del.allocateId.push(item.purchaseContractsIds);
        }
    });
    console.log(Del.allocateId);
};
//批量逻辑删除
const DelAll = () => {
    ElMessageBox.confirm(
        '确定删除吗?',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            center: true,
        }
    )
        .then(() => {
            axios.post(http.zblnb + '/cg/api/PurchaseContracts/DelPurchaseContract', {
                purchaseContractsIds: Del.allocateId,
                delName: "王思雨"
            }).then((res) => {
                console.log(res.data.data)
                if (res.data.data > 0) {
                    ElMessage.success('删除成功')
                    GetShowTime()
                }
                else {
                    ElMessage.error('删除失败')
                }
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '已取消',
            })
        })
}


const dialogVisible2 = ref(false)   //我方代表

//#region  我方代表

//查询条件
const wform = reactive({
    MName: "",
    Mstart: "",
    Mend: "",
    Bstart: "",
    Bend: "",
    SectorId: "",
    PostId: ""
})

//分页
const wPage = reactive({
    Pindex: 1,
    Psize: 3,
    pcount: 0,
    lcount: 0
})

//部门
const sectorlist = ref([])
const GetSectorList = () => {
    axios.get(http.zblnb + '/vendor/api/Post/GetSectorList')
        .then(res => {
            sectorlist.value = res.data.data;
            console.log(sectorlist.value)
        })
}

//树形
const handleNodeClick2 = (data: any) => {
    console.log(data)
    wform.SectorId = data.value
    GetManpowerList();
}

//显示人员档案
const manpowerList = ref([])
const GetManpowerList = () => {
    axios.get(http.zblnb + '/vendor/api/Manpower/GetManpowerList', {
        params: {
            Pindex: wPage.Pindex,
            Psize: wPage.Psize,
            MName: wform.MName || "",
            Mstart: wform.Mstart || "",
            Mend: wform.Mend || "",
            Bstart: wform.Bstart || "",
            Bend: wform.Bend || "",
            SectorId: wform.SectorId || "",
            PostId: wform.PostId || "",
        }
    })
        .then(res => {
            manpowerList.value = res.data.data.list
            wPage.lcount = res.data.data.lcount;
            wPage.pcount = res.data.data.pcount;
            console.log(res.data.data)
        })
}


//多选框
const check2 = ref([])
const handleSelectionChange2 = (val: User[]) => {
    check2.value = val
    form.pcOurRepresentativesName = check2.value[0].mName
    console.log(check2.value[0])
    form.pcOurRepresentatives = check2.value[0].postId
}


//#endregion

//#region  供应商名称弹框
const defaultProps = {
    children: 'children',
    label: 'label',
}
var VendorType = ref([]);
const getVendorType = () => {
    axios.get(http.zblnb + '/cg/api/Vendor/ProductTypeSelect').then(res => {
        if (res.data.code == 0) {
            VendorType.value = res.data.data
        }
        console.log(VendorType.value)
    })
}

//树形
const handleNodeClick = (data: Tree) => {
    console.log(data)
    form.purchaseContractsIds = data.value
}

const formInline = reactive({
    vNumber: '',
    vName: '',
    date: '',
    provinceId: '',
    cityId: '',
    vIndustry: '',
    bPhone: '',
    vPhone: '',
    vContact: '',
    PageIndex: 1,
    PageSize: 10,
    fid: ''
})

//供应商显示
var tableDatas = ref([]);
const table = () => {
    axios.get(http.zblnb + '/cg/api/Vendor/ProductTypeSelectShow', {
        params: {
            FId: formInline.fid,
            Node: formInline.vNumber,
            Name: formInline.vName,
            Sid: formInline.provinceId,
            Cid: formInline.cityId,
            Hid: formInline.vIndustry,
            BPhone: formInline.bPhone,
            SPhone: formInline.vPhone,
            ZProper: formInline.vContact,
            PageIndex: formInline.PageIndex,
            PageSize: formInline.PageSize
        }
    }).then(res => {

        if (res.data.code == 200) {
            tableDatas.value = res.data.data.list
        }
        console.log(tableData.value)
    })
}

//多选框
const check = ref([])
const handleSelectionChanges = (val: User[]) => {
    check.value = val
    form.vName = check.value[0].vName
    console.log(check.value[0].vName)
    console.log(check.value[0])
    form.vendorId = check.value[0].vendorId
}
//#endregion

//#region 
//跳转供应商名称
const vender = (vendorId: Number) => {
    router.push('/ListReturnsVendor?vendorId=' + vendorId);
}
//#endregion
</script>